<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.4/axios.min.js"></script>

</head>
<body>
    <h1>修改笔记</h1>
    标题：<input type="text" name="title" /><br />
    内容：<textarea name="content" id="" cols="30" rows="10"></textarea><br>
    <button>提交</button>
    <script>
        let tit = document.getElementsByName('title')[0];
        let content = document.getElementsByName('content')[0];
        let btn = document.querySelector('button');

        let id = window.location.search.split('=')[1];

        // 获取到查询字符串中的id
        // console.log(window.location.search.split('=')[1]);

        // 创建一个aixos实例对象
        let noteAxios = axios.create({
            method:"get",
            baseURL:"http://localhost:3000/notes"
        })

        // 展示原有数据
        noteAxios({
            params:{
                id
            }
        }).then(({data})=>{
            // console.log(data);
            // console.log(data[0].title);
            tit.value = data[0].title;
            content.value = data[0].content;
        })

        // 提交更新数据
        btn.onclick =async function(){
           let res =await noteAxios({
                method:"patch",
                url:`/${id}`,
                data:{
                    title:tit.value,
                    content:content.value
                }
            })

            console.log(res);
            if(res){
                window.location.href = './index.html'
            }
        }
     

    </script>
</body>
</html>